<template>
  <div class="home-content">
    <div class="side-menu">
      <div class="head">
        <h1>标签库</h1>
        <el-button icon="Plus" @click="popVisible = true"></el-button>
      </div>
      <div style="margin-top: 15px">
        <el-input v-model="keywords" placeholder="请输入标签名进行搜索" prefix-icon="Search" @keyup.enter="getTagsList"></el-input>
      </div>
      <ul class="menu-body">
        <li v-for="(item, index) in tagsList" :key="index" @click="handleSelectAction(item)" @mouseenter="item.showOper = true" @mouseleave="item.showOper = false" :class="item.id == selectType ? 'active' : ''">
          <p>
            <span>#</span>
            <span>{{ item.tagName }}</span>
          </p>
          <span class="icons" v-if="item.id != 0" v-show="item.showOper">
            <el-icon @click=";(isEdit = true), (popVisible = true), (formData.tagName = item.tagName), (formData.id = item.id)"><Edit /></el-icon>
            <el-icon style="margin-left: 5px" @click="delTag(item)"><Delete /></el-icon>
          </span>
        </li>
      </ul>
    </div>
    <book-marks-list ref="bookmarksRef" v-model="query"></book-marks-list>
    <el-dialog v-model="popVisible" :title="(isEdit ? '编辑' : '新增') + '标签'" width="486px" destroy-on-close @close="resetForm">
      <cloud-form ref="formRef" v-model="formData" :formConfig="formConfig"></cloud-form>
      <template #footer>
        <el-button @click="popVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(formRef)">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Comment, Pointer, Star, Timer } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, onMounted, markRaw, nextTick } from 'vue'
import { mAxios, encodeURL } from '~/utils/axios/axios.js'
import { useBookMarkStore } from '~/utils/pinia/bookmark.js'
const bookMarkStore = useBookMarkStore()
const isEdit = ref(false)
const popVisible = ref(false)
const bookmarksRef = ref()
const keywords = ref('')
const userId = Number(sessionStorage.getItem('user_id'))
const tagsList = ref([])
const selectType = ref(0)
const query = ref({ tagId: 0 })
const handleSelectAction = item => {
  selectType.value = item.id
  query.value.tagId = item.id
}
const getTagsList = () => {
  const params = {
    userId,
    tagName: keywords.value
  }
  mAxios.get('tags', { params: encodeURL(params) }).then(res => {
    tagsList.value = [{ tagName: '无标签', id: 0 }].concat(res.data.data)
  })
}
const formRef = ref()
const formData = ref({})
const formConfig = ref([
  {
    label: '名称',
    prop: 'tagName',
    type: 'input',
    required: true,
    setting: {
      placeholder: '请输入标签名称'
    }
  }
])
const submit = formRef => {
  if (!formRef) return
  formRef.validate(valid => {
    if (valid) {
      let req
      const params = { ...formData.value, userId }
      if (isEdit.value) {
        req = mAxios.put('tags', params)
      } else {
        req = mAxios.post('tags', params)
      }
      req.then(res => {
        popVisible.value = false
        res.data.succeed ? ElMessage.success('操作成功') : ElMessage.error('操作失败')
        getTagsList()
      })
    }
  })
}
const delTag = tag => {
  ElMessageBox.confirm('确定要删除标签' + tag.tagName + '？', '删除标签', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    center: false,
    closeOnClickModal: false,
    type: 'warning'
  }).then(() => {
    mAxios.delete('tags', { data: { id: tag.id, userId } }).then(res => {
      res.data.succeed ? ElMessage.success('删除成功') : ElMessage.error(res.data.message)
      getTagsList()
    })
  })
}
onMounted(() => {
  getTagsList()
  // bookMarkStore.tagId = 0
})
const resetForm = () => {
  formData.value = {}
  formRef.value.resetFields()
}
</script>

<style scoped lang="scss">
.home-content {
  display: flex;
  .side-menu {
    width: 400px;
    padding: 7px;
    border-left: 1px solid #eee;
    background-color: #f8f8f8;
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      margin-top: 15px;
      h1 {
        font-size: 18px;
        font-weight: 600;
        // margin-left: 10px;
      }
    }
    .menu-body {
      margin: 15px 0;
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding: 8px 20px;
        border-radius: 5px;
        color: #262626;
        cursor: pointer;
        &:hover {
          background-color: #e8e8e8;
          opacity: 0.8;
        }
        span {
          margin-left: 10px;
        }
      }
      .active {
        background-color: #e8e8e8;
        opacity: 0.8;
      }
    }
    .tree-side {
      width: 100%;
      max-height: 500px;
      overflow: auto;
      h4 {
        font-size: 14px;
        padding: 5px 10px;
        margin-bottom: 5px;
        color: #989898;
      }
      .custom-tree-node {
        width: 100%;
        display: flex;
        justify-content: space-between;
        cursor: default;
        padding-right: 20px;
        .node-label:hover {
          text-decoration: underline;
          cursor: pointer;
        }
        .node-icon {
          display: flex;
          align-items: center;
          cursor: pointer;
          :deep(.el-icon):hover {
            color: #8901b4;
          }
        }
      }
      .add-tree-node {
        :deep(.el-input) {
          height: 22px;
        }
      }
    }
  }
}
:deep(.el-tree) {
  background: #f8f8f8;
}
</style>
